<template>
  <div class="mechanismregAdd">
    <div class="container">
      <div class="container-main">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
          <Row>
            <Col span="24" class="left-part">
              <div class="title">基本信息</div>
              <Row>
                <Col span="8">
                  <!-- 机构名称 -->
                    <div class="address hongdian" >                     
                      <div class="left">  
                        <span style="color:red;">*</span>                      
                        <span>机构名称：</span>
                      </div>
                      <FormItem class="right" prop="orgName">
                        <Input
                          v-if="notReview"
                          v-model.trim="formValidate.orgName"
                          placeholder="请输入机构名称"
                          clearable  maxlength="50"                      
                        ></Input>
                        <div style="height:35px" v-else>{{formValidate.orgName}}</div>
                      </FormItem>
                    </div>
                </Col>
                <Col span="15">
                <!-- 机构地址 -->
                  <div class="region hongdian">
                    <div class="left">
                      <span style="color:red;">*</span>
                      <span>机构地址：</span>
                    </div>
                    <div class="right" v-if="notReview">
                      <Row>
                        <Col span="12" v-if="identity==1">
                          <FormItem prop="districtCode" :rules="genAddressRule(formValidate)">
                              <newfourLevelLinkage
                                @changeProvince="changeProvince"
                                @changeCity="changeCity"
                                @changeArea="changeArea"
                                :province="Number(formValidate.provinceCode)"
                                :city="Number(formValidate.cityCode)"
                                :area="Number(formValidate.districtCode)"    
                                ref="newfourLevelLinkage"             
                                style="width:100%"                
                              ></newfourLevelLinkage>                          
                          </FormItem>                            
                        </Col>
						            <Col span="12" v-if="identity!=1"> 
                          <FormItem prop="districtCode" :rules="genAddressRule(formValidate)">
                            <div style="height:35px">
                                <span v-if="formValidate.provinceName">{{formValidate.provinceName}}</span>
                                <span v-if="formValidate.cityName">{{formValidate.cityName}}</span>
                                <span v-if="formValidate.districtName">{{formValidate.districtName}}</span>
                            </div>
                          </FormItem>   
                        </Col>
                        <Col span="12">  
                          <FormItem prop="hosAddr">
                            <Input
                              v-if="notReview" maxlength="45"
                              v-model.trim="formValidate.hosAddr"
                              placeholder="请输入详细地址"
                              clearable
                              style="margin-left:15px;width:96%"
                            ></Input>
                          </FormItem>
                        </Col>
                      </Row>
                    </div>
                    <div class="right" v-if="!notReview">
                      <Row>
                        <Col span="12"> 
                          <FormItem prop="districtCode" :rules="genAddressRule(formValidate)">
                            <div style="height:35px" v-if="!notReview" >
                                <span>{{($store.getters.getProvinceList.filter(item => item.id == formValidate.provinceCode)[0] || {}).name}}</span>
                                <span>{{($store.getters.getCityList(formValidate.provinceCode).filter(item => item.id == formValidate.cityCode)[0] || {}).name}}</span>
                                <span>{{($store.getters.getAreaList(formValidate.cityCode).filter(item => item.id == formValidate.districtCode)[0] || {}).name}}</span>
                            </div>
                          </FormItem>   
                        </Col>
                        <Col span="12"> 
                          <FormItem prop="hosAddr">
                            <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.hosAddr}}</div>
                          </FormItem>
                        </Col>
                      </Row>
                    </div>                  
                  </div>                  
                </Col>
                <Col span="8">                   
                  <!-- 机构组织编码 -->
                  <div class="address" style="margin-left: 25px;">
                    <div class="left">
                      <span style="color:red;">*</span>
                      <span>医疗机构组织代码：</span>
                    </div>
                    <FormItem class="right" prop="orgCode">
                      <Input
                        v-if="notReview" maxlength="64"
                        v-model.trim="formValidate.orgCode"
                        placeholder :disabled="mode === 'edit'"
                        :clearable="mode != 'edit'"
                        style="100%"
                      ></Input>
                      <div style="height:35px;word-break: break-all;word-wrap: break-word;" v-else>{{formValidate.orgCode}}</div>
                    </FormItem>
                  </div>
                  <!-- 企业法人 -->
                  <div class="address">
                    <div class="left">
                      <span>企业法人：</span>
                    </div>
                    <FormItem class="right">
                      <Input
                        v-if="notReview" maxlength="32"
                        v-model.trim="formValidate.legalPerson"
                        placeholder
                        clearable
                        style="100%"
                      ></Input>
                      <div style="height:35px" v-else>{{formValidate.legalPerson}}</div>
                    </FormItem>
                  </div>
                  <!-- 交通路线 -->
                  <div class="address">
                    <div class="left">
                      <span>交通路线：</span>
                    </div>
                    <FormItem class="right">
                      <Input
                        v-if="notReview" maxlength="500"
                        v-model.trim="formValidate.route"
                        placeholder
                        clearable
                        style="100%"
                      ></Input>
                      <div style="min-height:35px;" v-else>{{formValidate.route}}</div>
                    </FormItem>
                  </div>
                  <!-- 医院别名 -->
                  <div class="address">
                    <div class="left">
                      <span>医院别名：</span>
                    </div>
                    <FormItem class="right">
                      <Input
                        v-if="notReview" maxlength="500"
                        v-model.trim="formValidate.alias"
                        placeholder
                        clearable
                        style="100%"
                      ></Input>
                      <div style="min-height:35px;" v-else>{{formValidate.alias}}</div>
                    </FormItem>
                  </div>
                </Col>                 
                  <Col span="8">
                    <!-- 机构分类 -->
                    <div class="address hongdian">
                      <div class="left">
                        <span style="color:red;">*</span>
                        <span>机构分类：</span>
                      </div>
                      <div class="right" v-if="notReview">
                        <Row gutter="12">
                          <Col span="12">
                            <FormItem prop="hospitalNature">
                              <Select v-if="notReview" v-model="formValidate.hospitalNature" style="margin-right:5px">
                                <Option
                                  v-for="item in typeList"
                                  :value="item.dictValue"
                                  :key="item.dictType"
                                >{{ item.dictName }}</Option>
                              </Select>
                              <div style="height:35px" v-else class="content">{{(typeList.filter((item) => formValidate.hospitalNature === item.dictValue)[0] || {}).dictName}}</div>
                            </FormItem>
                          </Col>
                          <Col span="12">
                            <FormItem prop="property">
                              <Select v-if="notReview" v-model="formValidate.property" style="">
                                <Option
                                  v-for="item in hospitalSuperiorList"
                                  :value="item.value"
                                  :key="item.value"
                                >{{ item.label }}</Option>
                              </Select>
                              <div style="height:35px" v-else class="content">{{(hospitalSuperiorList.filter((item) => formValidate.property === item.value)[0] || {}).label}}</div>
                            </FormItem>
                          </Col>
                        </Row>
                      </div>
                      <div class="right" v-if="!notReview">
                        <Row gutter="12">
                          <Col span="6">
                            <FormItem prop="hospitalNature">                             
                              <div style="height:35px" class="content">{{(typeList.filter((item) => formValidate.hospitalNature === item.dictValue)[0] || {}).dictName}}</div>
                            </FormItem>
                          </Col>
                          <Col span="17">
                            <FormItem prop="property">
                              <div style="height:35px" class="content">{{(hospitalSuperiorList.filter((item) => formValidate.property === item.value)[0] || {}).label}}</div>
                            </FormItem>
                          </Col>
                        </Row>
                      </div>
                    </div>
                    <!-- 法人身份证号码 -->
                    <div class="address">
                      <div class="left">
                        <span>法人身份证号码：</span>
                      </div>
                      <FormItem class="right">
                        <Input
                          v-if="notReview" maxlength="18"
                          v-model.trim="formValidate.legalPersonCard"
                          placeholder
                          clearable
                          style="100%"
                        ></Input>
                        <div style="height:35px" v-else>{{formValidate.legalPersonCard}}</div>
                      </FormItem>
                    </div>
                    <!-- 联系人 -->
                    <div class="address hongdian">
                      <div class="left">
                        <span style="color:red;">*</span>
                        <span>联系人：</span>
                      </div>
                      <FormItem class="right" prop="linkman">
                        <Input
                          v-if="notReview" maxlength="32"
                          v-model.trim="formValidate.linkman"
                          placeholder
                          clearable
                          style="margin-right:10px"
                        />
                        <div style="height:35px" v-else>{{formValidate.linkman}}</div>
                      </FormItem>
                    </div>
                  <!-- 预约期限 -->
                  <div class="address">
                    <div class="left">
                      <span> 预约期限：</span>
                    </div>
                    <FormItem class="right">
                      <Input
                        v-if="notReview" maxlength="500"
                        v-model.trim="formValidate.term"
                        placeholder
                        clearable
                        style="100%"
                      ></Input>
                      <div style="min-height:35px;" v-else>{{formValidate.term}}</div>
                    </FormItem>
                  </div>
                  </Col>
                  <Col span="7">
                    <!-- 机构级别 -->
                    <div class="address hongdian">
                      <div class="left">
                        <span style="color:red;">*</span>
                        <span>机构级别：</span>
                      </div>
                      <FormItem class="right" prop="grade" >
                        <Select v-if="notReview" v-model="formValidate.grade">
                          <Option
                            v-for="item in SuperiorList"
                            :value="item.dictType"
                            :key="item.dictType"
                          >{{ item.dictName}}</Option>
                        </Select>
                        <div style="height:35px" v-else class="content">{{(SuperiorList.filter((item) => formValidate.grade === item.dictType)[0] || {}).dictName}}</div>
                      </FormItem>                      
                    </div>
                    <!-- 上级医院 -->
                    <div class="address">
                      <div class="left" style="width: 70px">
                        <span>上级医院：</span>
                      </div>
                      <FormItem class="right" prop="orgParentCode">
                        <Select v-if="notReview" v-model="formValidate.orgParentCode">
                          <Option
                            v-for="item in hospitalSuperior"
                            :value="item.orgCode"
                            :key="item.orgCode"
                            style="z-index:99999"
                          >{{ item.orgName }}</Option>
                        </Select>
                        <div style="height:35px" v-else class="content">{{(hospitalSuperior.filter((item) => formValidate.orgParentCode === item.orgCode)[0] || {}).orgName}}</div>
                      </FormItem>
                    </div>
                    <!-- 联系电话 -->
                    <div class="address hongdian">
                      <div class="left" style="width: 80px">
                        <span style="color:red;">*</span>
                        <span>联系电话：</span>
                      </div>
                      <FormItem class="right" prop="linkmanTelephone">
                        <Input
                          v-if="notReview"
                          v-model.trim="formValidate.linkmanTelephone"
                          maxlength = '25'
                          placeholder
                          clearable
                        />
                        <div style="height:35px" v-else>{{formValidate.linkmanTelephone}}</div>
                      </FormItem>
                    </div>
                  </Col>
              </Row>
            </Col>
            
            <Col span="24" class="right-part">
              <div class="title">资质信息
                <span v-if="notReview" style="color: #FF9966;fontSize: 14px;marginLeft:35px;margin-bottom: 10px">(注意:图片只能上传jpg格式，且文件大小不超过200KB)</span>
              </div>
              
              <Row>
                <Col span="8">
                  <!-- 医疗机构执业许可证上传 -->                 
                    <Row >
                      <Col span="24">
                        <div class="address hongdian">
                          <div class="left">
                            <span style="color:red;">*</span>
                            <span>医疗机构执业许可证登记号：</span>
                          </div>
                          <FormItem prop="certListMap.0.code" :rules="{required: true, message: '请输入医疗机构执业许可证登记号'}" style="display:flex;">
                            <Input v-if="notReview" v-model.trim="getItemByType('1').code" maxlength="50"></Input>
                            <div style="height:35px;word-break: break-all;word-wrap: break-word;" v-else>{{getItemByType('1').code}}</div>
                          </FormItem>
                        </div>
                      </Col> 
                      <Col span="24">
                        <div class="upload-part" style="height:100px;width:100px;">
                          <div>
                            <div class="demo-upload-list" v-for="(item,index) in uploadList1" :key="index"
                            >
                              <div v-if="item.status === 'finished'" style="height:100px;width:100px;">
                                <img :src="fileBaseUrl + item.res.fileName">
                                <div class="demo-upload-list-cover">
                                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                  <Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('1', item)"></Icon>
                                </div>
                              </div>
                              <div v-else style="height:100px;width:100px;">
                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                              </div>
                            </div>
                          </div>
                            <Upload
                              v-show="uploadList1.length ==0"
                              ref="upload1"
                              :headers="fromData"
                              :action="uploadUrl"
                              :default-file-list="defaultList1"
                              :format="['jpg']"
                              :on-format-error="uploadFormatError"
                              max-size="200"
                              :on-exceeded-size="handleMaxSize"
                              :before-upload="() => preview('1')"
                              multiple
                              type="drag"
                              :data="uploadData"
                              :on-success="(res, file) => handleSuccess(res, file, '1')"
                              :show-upload-list="noshow"
                             
                            >
                             
                              <div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                          </Upload>
                        </div>
                      </Col>
                    </Row >
                  
                  <!-- 母婴保健技术服务执业许可证号 -->
                  <Row >
                      <Col span="24">
                        <div class="address">
                          <div class="left">
                            <span>母婴保健技术服务执业许可证号：</span>
                          </div>
                          <FormItem prop="healthlicense" style="display:flex;">
                            <Input v-if="notReview" v-model.trim="getItemByType('4').code" maxlength="50"></Input>
                            <div style="height:35px;word-break: break-all;word-wrap: break-word;" v-else>{{getItemByType('4').code}}</div>
                          </FormItem>
                        </div>
                      </Col> 
                      <Col span="24">
                        <div class="upload-part" style="height:100px;width:100px;">
                          <div >
                            <div class="demo-upload-list" v-for="(item,index) in uploadList4" :key="index" style="height:100px">
                              <div v-if="item.status === 'finished'" style="height:100px;width:100px;">
                                <img :src="fileBaseUrl + item.res.fileName">
                                <div class="demo-upload-list-cover">
                                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                  <Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('4', item)"></Icon>
                                </div>
                              </div>
                              <div v-else style="height:100px;width:100px;">
                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                              </div>
                            </div>
                          </div>
                            <Upload
                              v-show="uploadList4.length ==0"
                              ref="upload4"
                              :headers="fromData"
                              :action="uploadUrl"
                              :default-file-list="defaultList4"
                              :format="['jpg']"
                              :on-format-error="uploadFormatError"
                              max-size="200"
                              :on-exceeded-size="handleMaxSize"
                              :before-upload="() => preview('4')"
                              :data="uploadData"
                              :on-success="(res, file) => handleSuccess(res, file, '4')"
                              :show-upload-list="noshow"
                              multiple
                              type="drag"
                              
                            >
                            <!-- style="display: inline-block;width:98px;height:98px;" -->
                              <!-- <Button v-if="notReview" type="primary" class="button-upload">选择文件上传</Button> -->
                              <div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                          </Upload>
                        </div>
                      </Col> 
                  </Row > 
                </Col>
                <Col span="8">
                  <!-- 收费许可证号 -->
                  <Row >
                    <Col span="24">
                      <div class="address">
                        <div class="left">
                          <span>收费许可证号：</span>
                        </div>
                        <FormItem prop="feelicense" style="display:flex;">
                          <Input  v-if="notReview" v-model.trim="getItemByType('2').code" maxlength="50"></Input>
                          <div style="height:35px;word-break: break-all;word-wrap: break-word;" v-else>{{getItemByType('2').code}}</div>
                        </FormItem>
                      </div>
                    </Col> 
                    <Col span="24">
                      <div class="upload-part" style="height:100px;width:100px;">
                        <div >
                          <div class="demo-upload-list" v-for="(item,index) in uploadList2" :key="index" style="height:100px;">
                            <div v-if="item.status === 'finished'" style="height:100px;width:100px;">
                              <img :src="fileBaseUrl + item.res.fileName">
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                <Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('2', item)"></Icon>
                              </div>
                            </div>
                            <div v-else style="height:100px;width:100px;">
                              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                            </div>
                          </div>
                        </div>                         
                          <Upload
                            v-show="uploadList2.length ==0"
                            ref="upload2"
                            :headers="fromData"
                            :action="uploadUrl"
                            :default-file-list="defaultList2"
                            :format="['jpg']"
                            :on-format-error="uploadFormatError"
                            max-size="200"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="() => preview('2')"
                            :data="uploadData"
                            :on-success="(res, file) => handleSuccess(res, file, '2')"
                            :show-upload-list="noshow"
                            multiple
                            type="drag"
                            
                          >
                            <div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                        </Upload>
                      </div>
                    </Col>
                  </Row >
                  <!-- 大型医疗设备许可证号 -->
                  <Row >
                    <Col span="24">
                      <div class="address">
                        <div class="left">
                          <span>大型医疗设备许可证号：</span>
                        </div>
                        <FormItem prop="equipmentlicense" style="display:flex;">
                          <Input v-if="notReview" v-model.trim="getItemByType('5').code" maxlength="50"></Input>
                          <div style="height:35px;word-break: break-all;word-wrap: break-word;" v-else>{{getItemByType('5').code}}</div>
                        </FormItem>
                      </div>
                    </Col> 
                    <Col span="24"> 
                      <div class="upload-part" style="height:100px;width:100px;">
                        <div >
                          <div class="demo-upload-list" v-for="(item,index) in uploadList5" :key="index">
                            <div v-if="item.status === 'finished'" style="height:100px;width:100px;">
                              <img :src="fileBaseUrl + item.res.fileName">
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                <Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('5', item)"></Icon>
                              </div>
                            </div>
                            <div v-else style="height:100px;width:100px;">
                              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                            </div>
                          </div>
                        </div>                        
                          <Upload
                            v-show="uploadList5.length ==0"
                            ref="upload5"
                            :headers="fromData"
                            :action="uploadUrl"
                            :default-file-list="defaultList5"
                            :format="['jpg']"
                            :on-format-error="uploadFormatError"
                            max-size="200"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="() => preview('5')"
                            :data="uploadData"
                            :on-success="(res, file) => handleSuccess(res, file, '5')"
                            :show-upload-list="noshow"
                            multiple
                            type="drag"
                            
                          >
                            <div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                        </Upload>
                      </div>
                    </Col> 
                  </Row > 
                </Col>
                <Col span="8">
                  <!-- 放射诊疗许可证号-->
                  <Row >
                    <Col span="24">
                      <div class="address">
                        <div class="left">
                          <span>放射诊疗许可证号：</span>
                        </div>
                        <FormItem prop="radiationpermit" style="display:flex;">
                          <Input v-if="notReview" v-model.trim="getItemByType('3').code" maxlength="50"></Input>
                          <div style="height:35px;word-break: break-all;word-wrap: break-word;" v-else>{{getItemByType('3').code}}</div>
                        </FormItem>
                      </div>
                    </Col> 
                    <Col span="24">
                      <div class="upload-part" style="height:100px;width:100px;">
                        <div >
                          <div class="demo-upload-list" v-for="(item,index) in uploadList3" :key="index">
                            <div v-if="item.status === 'finished'" style="height:100px;width:100px;">
                              <img :src="fileBaseUrl + item.res.fileName">
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                <Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('3', item)"></Icon>
                              </div>
                            </div>
                            <div v-else style="height:100px;width:100px;">
                              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                            </div>
                          </div>
                          </div>                       
                          <Upload
                            v-show="uploadList3.length ==0"
                            ref="upload3"
                            :headers="fromData"
                            :action="uploadUrl"
                            :default-file-list="defaultList3"
                            :format="['jpg']"
                            :on-format-error="uploadFormatError"
                            max-size="200"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="() => preview('3')"
                            :data="uploadData"
                            :on-success="(res, file) => handleSuccess(res, file, '3')"
                            :show-upload-list="noshow"
                            multiple
                            type="drag"
                            
                          >
                            <div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                        </Upload>
                      </div>
                     </Col>
                    </Row >
                  <!-- 卫生许可证编号 -->
                  <Row >
                      <Col span="24">
                        <div class="address">
                          <div class="left">
                            <span>卫生许可证编号：</span>
                          </div>
                          <FormItem prop="hygienelicense" style="display:flex;">
                            <Input v-if="notReview" v-model.trim="getItemByType('6').code" maxlength="50"></Input>
                            <div style="height:35px;word-break: break-all;word-wrap: break-word;" v-else>{{getItemByType('6').code}}</div>
                          </FormItem>
                        </div>
                    </Col> 
                    <Col span="24">
                      <div class="upload-part" style="height:100px;width:100px;">
                        <div >
                          <div class="demo-upload-list" v-for="(item,index) in uploadList6" :key="index">
                            <div v-if="item.status === 'finished'" style="height:100px;width:100px;">
                              <img :src="fileBaseUrl + item.res.fileName">
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                <Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('6', item)"></Icon>
                              </div>
                            </div>
                            <div v-else style="height:100px;width:100px;">
                              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                            </div>
                          </div>
                        </div>                         
                          <Upload
                            v-show="uploadList6.length ==0"
                            ref="upload6"
                            :headers="fromData"
                            :action="uploadUrl"
                            :default-file-list="defaultList6"
                            :format="['jpg']"
                            :on-format-error="uploadFormatError"
                            max-size="200"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="() => preview('6')"
                            :data="uploadData"
                            :on-success="(res, file) => handleSuccess(res, file, '6')"
                            :show-upload-list="noshow"
                            multiple
                            type="drag"
                           
                          >
                            <div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                        </Upload>
                      </div>
                    </Col>
                    </Row>
                </Col>
              </Row>
            </Col>
            <!-- 机构简介 -->
            <Col span="23" class="left-part">
              <div class="title">机构简介</div>
              <div class="address" style="margin-left:5px">
                <FormItem style="width:100%;" prop="hosIntroduction">
                  <vueEditor
                    v-if="notReview"
                    id="homeInfo"
                    :textHtml="formValidate.hosIntroduction"
                    :urlCode="urlCode"
                    @valueHandle="afterChange"                     
                    style="width:98%;margin:0 10px"
                  ></vueEditor>
                  <div v-else v-html="formValidate.hosIntroduction"></div>
                </FormItem>
              </div>
            </Col>
            <!-- </Row> -->
          </Row> 
        </Form>
        <div class="button-bottom">
          <Button type="primary" v-if="notReview" @click="handleSubmit('formValidate')" :disabled="disabled">
            <Icon type="ios-checkmark" style="margin-right:5px;" size="16" />
            提交
          </Button>
          <!-- <Button @click="edit(ret)" style="margin-left:30px" v-if="!notReview">
            <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>编辑
          </Button> -->
          <Button @click="back" style="margin-left:30px">
            <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
          </Button>
        </div>
      </div>
    </div>
    <Modal title="预览图片" width="30" v-model="viewModal" footer-hide>
      <div>
        <img :src="viewSrc" style="width: 100%" />
      </div>
    </Modal>
    <Spin v-if="showSpin" fix></Spin>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import address from "@/configs/address";
import cookie from "@/utils/cookie.js";
import code from "@/configs/base.js";
import vueEditor from "@/components/vueEditor";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
export default {
  components: {
    newfourLevelLinkage,
    vueEditor
  },
  props: {
    mode: String
  },
  data() {
    return {
      urlCode: '{"urlCode":"' + code.urlCode.richText + '"}',
      showSpin: false,
      noshow: false,
      uploadData: {
        json: '{"urlCode":"' + code.urlCode.userImage + '"}'
      },
      // 查看列表
      uploadList1: [],
      uploadList2: [],
      uploadList3: [],
      uploadList4: [],
      uploadList5: [],
      uploadList6: [],
      uploadList7: [],
      
      defaultList1: [],
      defaultList2: [],
      defaultList3: [],
      defaultList4: [],
      defaultList5: [],
      defaultList6: [],
      defaultList7: [],

      // 预览图片的src
      viewSrc: '',
      // 预览图片Modal
      viewModal: false,
      uploadUrl: api.fileAll,
      // 机构级别
      SuperiorList: [],
      // 上级医院列表
      hospitalSuperior: [],
      //  机构分类
      hospitalSuperiorList: [
        {
          value: "1",
          label: "公立"
        },
        {
          value: "2",
          label: "私立"
        }
      ],
      typeList: [],
      formValidate: {
        hospitalType: 1,
        id: null,
        provinceCode: "",
        provinceName: "",
        // 市
        cityCode: "",
        cityName: "",
        //县
        districtCode: "",
        districtName: "",
        //详细地址
        hosAddr: "",
        //机构名称
        orgName: "",
        //机构组织代码
        orgCode: "",
        hosIntroduction: "",
        //机构分类
        property: null,
        orgParentCode: null,
        grade: null,
        hospitalNature: null,
        certListMap: [
          {
            type: "1",
            code: "",
            filePath: {}
          },
          {
            type: "2",
            code: "",
            filePath: {}
          },
          {
            type: "3",
            code: "",
            filePath: {}
          },
          {
            type: "4",
            code: "",
            filePath: {}
          },
          {
            type: "5",
            code: "",
            filePath: {}
          },
          {
            type: "6",
            code: "",
            filePath: {}
          },
          {
            type: "7",
            code: "",
            filePath: []
          }
        ]
      },
      ruleValidate: {
        grade: [ { required: true, type: 'string', message: "请选择机构级别", trigger: "change" } ],
        // 城
        provinceCode: [ { required: true, message: "请选择省级", trigger: "change" } ],
        // 市
        cityCode: [ { required: true, message: "请选择城市", trigger: "change" } ],
        //县
        districtCode: [ { required: true, message: "请选择区县", trigger: "change" } ],
        // 机构名称
        orgName: [ { required: true, message: "请输入机构名称", trigger: "change" } ],
        //详细地址
        hosAddr: [ { required: true, message: "请填写详细的地址:省、市、区", trigger: "change" } ],
        // 组织机构代码
        orgCode: [ { required: true, message: "请输入医疗组织机构代码", trigger: "change" } ],
        hospitalNature: [  { required: true, message: "请选择结构分类", trigger: "change" }  ],
        property: [  { required: true, message: "请选择结构分类", trigger: "change" }  ],
        // 联系人
        linkman: [ { required: true, message: "请输入联系人", trigger: "change" } ],
        // 联系人电话
        linkmanTelephone: [ { required: true, message: "请输入联系电话", trigger: "change" } ],
        licence: [ { required: true, message: "请输医疗机构执业许可登记号", trigger: "change" } ]
      },
      //城市列表
      provList: [],
      cityList: [],
      countyList: [],

      province: null,
      city: null,
      area: null,
      isBack: 2,
      newprovince: "",
      newcity: "",
      newdistrict: "",
      cStatus: true,
      idtt: "",
      disabled: false,
      ownArea: [],
      identity: '',
    };
  },
  created() {
    this.province = this.$route.query.province
      ? parseInt(this.$route.query.province)
      : null;
    this.city = this.$route.query.city
      ? parseInt(this.$route.query.city)
      : null;
    this.area = this.$route.query.area
      ? parseInt(this.$route.query.area)
      : null;
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/maintain/indexManagement/index",
        title: "索引管理"
      },
      {
        path: "/index/maintain/mechanismreg/list",
        title: "医疗机构注册"
      }
    ];
    this.$emit("changeBreadList", breadList);
    this.identity = cookie.getCookie("idtt");
    this.ownArea = JSON.parse(cookie.getCookie("ownArea"));
    if(this.identity !=1) {
		if (this.ownArea.province) {
			this.formValidate.provinceCode = this.ownArea.province.id;
			this.formValidate.provinceName = this.ownArea.province.name;
		}
		if (this.ownArea.city) {
			this.formValidate.cityCode = this.ownArea.city.id;
			this.formValidate.cityName = this.ownArea.city.name;
		}
		if (this.ownArea.area) {
			this.formValidate.districtCode = this.ownArea.area.id;
			this.formValidate.districtName = this.ownArea.area.name
		}
    }
  },
  computed: {
    notReview() {
      return this.mode !== 'review';
    }
  },
  mounted() {   
        this.uploadList1 = this.$refs.upload1.fileList;
        this.uploadList2 = this.$refs.upload2.fileList;
        this.uploadList3 = this.$refs.upload3.fileList;
        this.uploadList4 = this.$refs.upload4.fileList;
        this.uploadList5 = this.$refs.upload5.fileList;
        this.uploadList6 = this.$refs.upload6.fileList;
    // a获取医院等级
    this.getGrent();
    //获取省级信息
    this.getCity();
    // 获取机构分类
    this.getClass();
    // 获取上级医院
    this.getLastHospital();
    let id = this.$route.query.id;
    this.formValidate.id = id;
    
    if (this.mode !== 'add') {
      this.showSpin = true;
      this.$axios
        .post(api.mechanismregSearch, {
          id
        })
        .then(res => {
          if (res.data.code === 1) {
             // 利用返回数据填充 前端数据
            const ret = JSON.parse(JSON.stringify(res.data.object));
            //对 ret.certlist 进行 this.formValidate.certListmerge 进行merge 以兼容旧数据;
            if(this.formValidate.certListMap && ret.certList){
              this.formValidate.certListMap.forEach((item, index) => {
                ret.certList[index] = Object.assign({}, item, ret.certList[index] || {})
              });
            }           
             // 利用返回数据填充 前端数据
             if(res.data.object.certList){
               res.data.object.certList.forEach((item, index) => {
                if (item.filePath) {
                  item.filePath = JSON.parse(item.filePath)
                  if (item.type === '7') {
                    this['uploadList' + item.type] = item.filePath.map((item) => {return {url: item.fileName, res: item}})                 
                  } else {
                    this['uploadList' + item.type] = [{url: item.filePath.fileName, res: item.filePath}]
                  }
                } else {
                  this['uploadList' + item.type] = []
                }
              });
             }            
            // 初始化默认图片列表
            this.defaultList1 = this.uploadList1;
            this.defaultList2 = this.uploadList2;
            this.defaultList3 = this.uploadList3;
            this.defaultList4 = this.uploadList4;
            this.defaultList5 = this.uploadList5;
            this.defaultList6 = this.uploadList6;
            this.defaultList7 = this.uploadList7;
            
              setTimeout(() => {
                this.$nextTick(() => {
                  
                      this.uploadList1 = this.$refs.upload1.fileList;
                      this.uploadList2 = this.$refs.upload2.fileList;
                      this.uploadList3 = this.$refs.upload3.fileList;
                      this.uploadList4 = this.$refs.upload4.fileList;
                      this.uploadList5 = this.$refs.upload5.fileList;
                      this.uploadList6 = this.$refs.upload6.fileList;
                })
              }, 0);
             this.formValidate = Object.assign({}, this.formValidate, ret);
            // 必须克隆certList否则提交的时候无法序列化 
            if(this.formValidate.certList){
              this.formValidate.certListMap = JSON.parse(JSON.stringify(this.formValidate.certList));
            }
            // 省市区反显
            this.formValidate.provinceCode = String(ret.provinceCode);
            this.formValidate.cityCode = String(ret.cityCode);
            this.formValidate.districtCode = String(ret.districtCode);
            this.showSpin = false;
          } else {
            this.$Message.error(ret.data.message);
          }
        });
    }
  },
  methods: {
    // 编辑机构
    edit(item) {
      this.getcontent()
    },
    back() {
      this.functionJS.queryNavgationTo(
        this,
        "/index/organizat/mechanismreg/list",
        {
          pageNo: this.$route.query.pageNo,
          province: this.province,
          city: this.city,
          area: this.area,
          hospital: this.hospital,
          isBack: 2
        }
      );
    },
    genAddressRule(formValidate) {
      const that = this;
      return {
        required: true,
        trigger: "change",
        validator: (rule, value, callback) => {
          if (!formValidate.provinceCode) {
            callback(new Error("请选择省份"));
          } else if (!formValidate.cityCode) {
            callback(new Error("请选择市"));
          } else if (!formValidate.districtCode) {
            callback(new Error("请选择区"));
          } else {
            callback();
          }
        }
      };
    },
    // 机构简介
    afterChange(val) {
        this.formValidate.hosIntroduction = val;
    },
    // 获取上级医院
    getLastHospital() {
      this.$axios.post(api.findKbaoHospitalRegisterDtoPage, {hospitalType: 1}).then(res => {
        if (res.data.success) {
          let ret = res.data.object || [];
          this.hospitalSuperior = ret.map(item => { return {orgCode: item.orgCode, orgName: item.orgName}});
        }
      });
    },
    // 获取机构分类
    getClass() {
      this.$axios.post(api.classification,{}).then(res => {
        if (res.data) {
          let ret = res.data.object;
          this.typeList = ret;
        }
      });
    },
    // 获取医院等级
    getGrent() {
      this.$axios.post(api.managementAll,{}).then(res => {
        if (res.data) {
          let ret = res.data.object;
          this.SuperiorList = ret;
        }
      });
    },
    //       控制图片上传开始---------------------------------------------------------------------
    onremove (type, file) {
      const fileList = this.$refs['upload' + type].fileList;
      this.$refs['upload' + type].fileList.splice(fileList.indexOf(file), 1);       
    },
    // 文件上传成功触发的函数
    handleSuccess(res, file, type) {
      res = this.uploadFileDecrypt(res);
      if (res.success) {
        file.res = res.object[0];
      } else {
        this.$Message.error("上传失败,请重试");
      }
    },
    // // 查看预览图片
    handleView(item) {
      this.viewModal = true;
      this.viewSrc = this.fileBaseUrl + item.res.fileName;
    },
    preview(type) {
      if (type !== '7') {
        const check = this['uploadList' + type].length < 1;
        if (!check) {
          this.$Message.info("只能上传一张图片");
          return false;
        }
      }
    },

    // 控制图片上传结束-------------------------------------------------------------------------
    // 上传图片大小错误提醒
    handleMaxSize() {
      this.$Message.error("上传图片大小不能超过200kb");
    },
    // 上传图片格式错误提醒
    uploadFormatError() {
      this.$Message.error("上传图片类型只能是jpg格式");
    },
    //选择省
    changeProvince(val) {
      this.formValidate.provinceCode = val;
      this.provList = this.$store.getters.getProvinceList
      this.provList.forEach(i =>{
        if (i.id == this.formValidate.provinceCode) {
            this.formValidate.provinceName = i.name
          }
      })
    },
    changeCity(val) {
      this.formValidate.cityCode = val
      this.cityList = this.$store.getters.getCityList(this.formValidate.provinceCode);
      this.cityList.forEach(i =>{
        if (i.id == this.formValidate.cityCode) {
            this.formValidate.cityName = i.name
          }
      })
    },
    changeArea(val) {
      this.formValidate.districtCode = val;
      this.countyList = this.$store.getters.getAreaList(this.formValidate.cityCode);
      this.countyList.forEach(i =>{
        if (i.id == this.formValidate.districtCode) {
            this.formValidate.districtName = i.name
          }
      })
    },
    // 获取省级
    getCity() {
      this.$axios.post(api.getCity,{}).then(res => {
        if (res.data) {
          let ret = res.data.object;
          ret.forEach(item => {
            item.id = item.id.toString();
          });
          this.provList = ret;
          this.countyList = [];
          this.cityList = [];
          // this.provChange2();
        }
      });
    },
    provChange2() {
      let list = this.provList;
      let len = list.length;
      // 城市列表
      this.cityList = [];
      this.countyList = [];
      let citylist;
      if (list != -1) {
        for (let i = 0; i < len; i++) {
          if (list[i].id == this.formValidate.provinceCode) {
            citylist = list[i].cityList;
            list[i].cityList.forEach(item => {
              item.id = item.id.toString();
            });
          }
        }
        this.cityList = citylist;
        this.cityChange2();
      }
    },
    cityChange2() {
      if (Boolean(this.formValidate.cityCode)) {
        // 区县、
        this.countyList = [];
        this.$axios
          .post(api.getCounty, {
            cityId: this.formValidate.cityCode
          })
          .then(res => {
            if (res.data) {
              let ret = res.data.object;
              ret.forEach(item => {
                item.id = item.id.toString();
              });
              this.countyList = ret;
            }
          });
      }
    },
    // 提交表单
    handleSubmit(name) {
        this.disabled = true
        this.$refs[name].validate(valid => {
          if (valid) {
            //上传'地址'字段内容填充
            this.formValidate.certListMap.forEach((item, index) => {
              if (item.type == '7') {
                item.filePath = this.uploadList7.map((item) => item.res)
              } else {
                item.filePath = this['uploadList' + item.type].map((item) => item.res)[0]
              }
            })
            this.hospitalSuperior.forEach(i =>{
              if(i.orgCode == this.formValidate.orgParentCode){
                  this.formValidate.orgParentName = i.orgName
              }
            })
            this.SuperiorList.forEach(i =>{
              if(i.dictType == this.formValidate.grade){
                  this.formValidate.gradeName  = i.dictName
              }
            })
            let reqUrl = '';
            this.mode === 'add' && (reqUrl = api.mechanismregAdd);
            this.mode === 'edit' && (reqUrl = api.mechanismregEdit);
            this.$axios
              .post(reqUrl, this.formValidate)
              .then(res => {
                if (res.data.code) {
                  let ret = res.data;
                  this.mode === 'add' && this.$Message.success("添加成功");
                  this.mode === 'edit' && this.$Message.success("修改成功");
                  this.disabled = false 
                  this.back();
                } else {
                  this.disabled = false 
                  this.$Message.error(res.data.message);
                }
              })
              .catch(err => {
                this.disabled = false
                this.$Message.error(res.data.err);
              });
          } else {
            this.disabled = false 
            // 必填项填写失败
            this.$Message.error("请检查必填项是否填写正确！");
          }
        });
    },
    getItemByType(type) {
      return this.formValidate.certListMap.filter(item => item.type == type)[0]
    }
  },
  watch: {
    formValidate(n) {
        console.log(n)
    },
    hospitalSuperior(n) {
      console.log(n)
    },
    'formValidate.provinceCode'(n){
      console.log(n);
    },

    city(n){
      console.log(n);
    },

    area(n){
      console.log(n);
    }
  }
};
</script>
<style lang='less' scoped>
.mechanismregAdd {
  width: 100%;
  box-sizing: border-box;
  .container {
    width: 100%;
    margin-bottom: 40px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .container-main {
      flex-direction: column;
      width: 100%;
      .left-part {
        width: 98%;
        min-height: 300px;
        margin: 20px auto;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 20px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;         
        }
        .left {
          flex: 0 0 auto;
          // width: 140px;
          text-align: left;
          margin-right: 5px;
        }
        .right {
          width: 94%;
          text-align: left;
        }
      }
      .right-part {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 10px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 210px;
          text-align: left;
          margin-right: 10px;
        }
        .upload-part {
          display: flex;
          position: relative;
          align-items: center;
          top: -12px;
          margin-left: 35px;
          .demo-upload-list {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;
          }
          // 关闭input文本框自动填充背景色黄色
          input:-webkit-autofill {
            box-shadow: 0 0 0px 1000px white inset !important;
          }

          .demo-upload-list img {
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
          }
          .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
        /deep/ .ivu-input {
          width: 200px;
          margin-right: 20px;
        }
      }
      .button-bottom {
        margin: 20px 0;
        text-align: center;
        button {
          width: 100px;
          // height: 50px;
        }
      }
      .ivu-col-offset-6 {
        margin: 0px;
      }
      .region,
      .address {
        display: flex;
        // flex-direction: row;    
        margin-left: 35px;
        .left {
          font-size: 14px;
          padding-top: 5px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          display: inline-block;
          width: 400px;
          border: 1px solid black;
          line-height: 30px;
          outline: none;
          background: #fff;
          text-indent: 5px;
        }
      }
      .hongdian{
        margin-left: 25px;
      }
      .region {
        .ivu-col-span-6 {
        }
        select {
          width: 100px;
          // margin-right: 20px;
          outline: none;
          option {
            text-align: center;
          }
        }
      }
      .hosAddr {
        margin-left: 500px;
      }
    }
  }
}
.button-upload {
  margin-left: 10px;
  margin-right: 10px;
}
.ivu-upload {
  display: flex;
  .ivu-upload-select {
    height: 100%;
  }
  /deep/ .ivu-upload-list {
    height: 100%;
    margin-top: -10px;
    padding-left: 4px;
    padding-right: 4px;
    .ivu-upload-list-file {
      padding: 0px;
    }
  }
}
</style>
